<template>
    <div class="login-box">
        <img src="../../images/login-icon.png" class="logo" >
        <h6 class="title">欢迎来到便宜购</h6>
        <div class="ipt-box">

            <img src="../../images/login-phone.png" >

            <input v-model="regObj.phone" type="text" placeholder="请输入注册手机号">
        </div>
        <div class="ipt-box">
            <img src="../../images/register-name.png" >

            <input v-model="regObj.name" type="text" placeholder="请输入用户名">
        </div>

        <van-checkbox v-model="agree" checked-color="#f5222d">同意《xxx协议》？</van-checkbox>

        <van-button @click="loginEvt" 
            :disabled="!agree" type="primary"
            :loading="loading"  loading-text="注册中..." 
            color="#f4ea2a" block>注册</van-button>
       
        <span class="link" @click="$router.push('/login')">已有账号去登录>></span>

        <div class="right">powered by pianyigou-APP &copy; 2021-02-05</div>
    </div>
</template>
<script>
    import {registerApi } from '../../apis/loginApi'

    export default {

        data() {
            return {
                agree: false,
                regObj: {
                    phone: '',
                    name: ''
                },
                loading: false
            }
        },

        methods: {
            async loginEvt() {
                // 校验手机号是否输入正确和用户名是否输入
                if (!/^1[3-9]{1}[0-9]{9}$/.test(this.regObj.phone)) {
                    // 在全局注册了Toast组件以后，会在prototype上添加一个$toast方法
                    this.$toast({
                        message: '请输入正确的手机号',
                        position: 'bottom'
                    })
                    return
                }

                if (!/^[a-z0-9_-]{3,15}$/.test(this.regObj.name)){
                    this.$toast({
                        message: '3到15个字符，只能包含小写，数字或_',
                        position: 'bottom'
                    })
                    return
                }

                // 发起异步请求 -- 一定要注意二次点击，所以要把点击按钮遮掉，要用loading变量来实现一个节流
                if (this.loading) return
                
                // 需要把节流标识开启
                this.loading = true
                let result = await registerApi(this.regObj)
                console.log(result);
                if (result.code === 200) {
                    this.$toast.success('注册成功，请登录使用')
                    this.$router.push('/login')
                } else {
                    this.$toast.fail(result.message)
                }

                // 节流标识应该等一下才关闭，避免用户点击比逻辑块
                setTimeout(() => {
                    this.loading = false
                })
            },

            async getVdtCode() {
                
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";

    .login-box {
        display: block;
        position: relative;
        height: 100%;
        padding: 4vh 20px 0;
       .logo {
            width: 50px;
        }
       .title { font-size: 16px;
        text-align: center;
        margin-top: 10px;
        }
        > .ipt-box {
                 display: flex;
                 padding: 10px 0;
                 margin-bottom: 16px;
                 border: 1px solid @cdd ;
                 border-radius: 50px;
            > img {
                     height:30px;
                     padding-left:10px;
                     }
            input {
                flex: 1;
                height: 32px;
                background: transparent;
                border: none;
                outline: none;
                text-indent: 12px;
                font-size: .8rem;
                // & 与input是同级样式
                &::-webkit-input-placeholder {
                    font-size: .75rem;
                    color: @cdd;
                }
            }

            .btn {
                border-left: solid 1px @cdd;
                font-size: .7rem;
                line-height: 32px;
                text-align: center;
            }
        }

        .van-checkbox {
            margin-top: 20px;
            margin-bottom: 16px;
            font-size: .75rem;
        }

        .link {
            display: block;
            margin: 24px 0;
            line-height: 32px;
            font-size: .75rem;

        }

        .right {
            position: absolute;
            left: 0;
            bottom: 16px;
            width: 100%;
            font-size: .65rem;
            color: @cdd;
            text-align: center;
        }
    }
</style>